<template>
	<view>
		<view class="update-main">
			<view class="cu-progress round sm striped active">
				<view class="bg-green" :style="[{ width:progress+'%'}]"></view>
			</view>
			<text class="center text-gray text-xxl">正在更新数据({{progress}}%)</text>
			<!-- <button class="center cu-btn bg-green margin-top" @tap="openFile()" v-if="progress==100 && filePath">安装程序</button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/* 进度(%) */
				progress:0,
				/* 下载链接 */
				downloadUrl:'',
				msg:'',
				/* 下载任务 */
				downloadTask:{},
				/* 下载文件路径 */
				filePath:'',
				/* 下载进程是否结束 */
				isEnd:false
			}
		},
		onLoad(options) {
			this.downloadUrl=options.downloadUrl;
			if(this.downloadUrl){
				this.downLoad();
			}else{
				uni.showToast({
					title:'链接失效',
					icon:'fail'
				})
			}
		},
		onBackPress(e) {
			if(e.from == 'backbutton' && !this.isEnd){
				uni.showToast({
					title:'请等待下载完成',
					icon:'loading'
				})
				return true;//阻止默认返回行为
			}
		},
		methods: {
			downLoad(){
			this.downloadTask = uni.downloadFile({
				url: this.downloadUrl,
				success: (res) => {
					if(res.statusCode==200){
						this.filePath=res.tempFilePath;
						this.openFile();
						this.isEnd=true;
					}else{
						this.downLoadFail();
					}
				},
				fail:(res)=>{
					this.downLoadFail();
				}
			});
			let progress = null;
			this.downloadTask.onProgressUpdate((res) => {
				if (progress != res.progress) {
					this.progress = parseInt(res.progress);
				}
			});
			},
			downLoadFail(){
				uni.showModal({
					title: '下载失败',
					content: '是否重新下载:',
					success: (res)=> {
						if (res.confirm) {
							this.isEnd=false;
							this.downLoad();
						}else{
							this.isEnd=true;
							uni.navigateBack();
						}
					}
				});
			},
			openFile(){
				uni.openDocument({
					filePath: this.filePath,
					success: function(res) {
						 console.log(res,'打开文件返回')
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: #F5F5F5;
}
.bg-green{
	background: green;
}
.update-main{
	position: fixed;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
	width: 90%;
	text-align: center;
	text{
		display: block;
	}
	button{
		background-color: #39b54a !important;
		width: 200upx !important;
	}
}
	
	
/* ==================
         进度条
 ==================== */

.cu-progress {
	overflow: hidden;
	height: 28upx;
	background-color: #ebeef5;
	display: inline-flex;
	align-items: center;
	width: 100%;
}
.cu-progress::before{
	height: 0;
}
.cu-progress+view,
.cu-progress+text {
	line-height: 1;
}

.cu-progress.xs {
	height: 10upx;
}

.cu-progress.sm {
	height: 20upx;
}

.cu-progress view {
	width: 0;
	height: 100%;
	align-items: center;
	display: flex;
	justify-items: flex-end;
	justify-content: space-around;
	font-size: 20upx;
	color: #ffffff;
	transition: width 0.6s ease;
}

.cu-progress text {
	align-items: center;
	display: flex;
	font-size: 20upx;
	color: #333333;
	text-indent: 10upx;
}

.cu-progress.text-progress {
	padding-right: 60upx;
}

.cu-progress.striped view {
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-size: 72upx 72upx;
}

.cu-progress.active view {
	animation: progress-stripes 2s linear infinite;
}

@keyframes progress-stripes {
	from {
		background-position: 72upx 0;
	}

	to {
		background-position: 0 0;
	}
}
	
</style>